<template>
  <div>
    <px-row style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-form-item label="年份">
              <px-date-picker v-model="queryParams.particularYear" format="YYYY" value-format="YYYY" type="year" placeholder="请选择年份" />
            </px-form-item>
            <px-form-item label="厂区">
              <px-select v-model="queryParams.level" :disabled="facDisabled" placeholder="请选择厂区" clearable style="width: 210px" filterable>
                <px-option v-for="dict in liquidList" :key="dict.itemName" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>

            <px-form-item label="核算边界">
              <!-- <px-select v-model="queryParams.templateId" placeholder="请选择核算边界" clearable style="width: 210px" filterable>
                <px-option v-for="dict in templateList" :key="dict.boundaryId" :label="dict.templateName" :value="dict.id" />
              </px-select> -->
              <px-input v-model="queryParams.templateName" disabled placeholder="请输入核算边界" style="width: 240px" clearable />
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </px-col>
    </px-row>
    <px-row style="height: 340px; margin-top: 16px" :gutter="16">
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus" style="position: relative">
          <modelTitle :title="'tCO2e预测总览'" />
          <div class="model_chart" style="margin-top: 16px">
            <div class="accountingTop">
              <img class="accountingTopicon" src="@/assets/images/tanpaifangfenxi.png" />
              <p class="accountingTop1">碳排放总量</p>
              <p class="accountingTop2">
                <span>{{ firstData?.resultCommonDTO?.General?.value ? firstData?.resultCommonDTO?.General?.value : "-" }}</span> tCO2e
              </p>
              <!-- <p class="accountingTop3">同比实际</p>
              <p class="accountingTop4">
                {{ firstData.resultCommonDTO?.General?.comparison ? Math.abs(firstData?.resultCommonDTO?.General?.comparison) : "-" }}
                <span v-if="firstData?.resultCommonDTO?.General?.comparison > 0">
                  <px-icon color="#ef4444" style="font-size: 12px !important">
                    <Top />
                  </px-icon>
                </span>
                <span v-if="firstData?.resultCommonDTO?.General?.comparison < 0">
                  <px-icon color="#10b981" style="font-size: 12px !important">
                    <Bottom />
                  </px-icon>
                </span>
                <span v-if="firstData.resultCommonDTO?.General?.comparison == null" />
              </p> -->
            </div>

            <div class="accountingcenter">
              <div class="accountingcenter1">
                <p>排放类别</p>
                <p>碳排放预测TOP1</p>
              </div>
              <div class="accountingcenter2">
                <p>{{ firstData.resultCommonDTO?.Category1?.name }}</p>
                <p>
                  <span>{{ firstData.resultCommonDTO?.Category1?.value ? firstData.resultCommonDTO?.Category1?.value : "-" }}</span> tCO2e
                </p>
                <p>
                  占比
                  <span>{{
                    firstData.resultCommonDTO?.Category1?.dividePercentage ? firstData.resultCommonDTO?.Category1?.dividePercentage : "-"
                  }}</span>
                </p>
              </div>
              <!-- <div class="accountingcenter3">
                <p>
                  同比实际
                  <span>{{ firstData.resultCommonDTO?.Category1?.comparison ? firstData.resultCommonDTO?.Category1?.comparison : "-" }}</span>
                </p>
              </div> -->
            </div>
            <div class="accountingcenter">
              <div class="accountingcenter1">
                <p>排放子类别</p>
                <p>碳排放预测TOP1</p>
              </div>
              <div class="accountingcenter2">
                <p>{{ firstData.resultCommonDTO?.Category2?.name }}</p>
                <p>
                  <span>{{ firstData.resultCommonDTO?.Category2?.value ? firstData.resultCommonDTO?.Category2?.value : "-" }}</span> tCO2e
                </p>
                <p>
                  占比
                  <span>{{
                    firstData.resultCommonDTO?.Category2?.dividePercentage ? firstData.resultCommonDTO?.Category2?.dividePercentage : "-"
                  }}</span>
                </p>
              </div>
              <!-- <div class="accountingcenter3">
                <p>
                  同比实际
                  <span>{{ firstData.resultCommonDTO?.Category2?.comparison ? firstData.resultCommonDTO?.Category2?.comparison : "-" }}</span>
                </p>
              </div> -->
            </div>
          </div>
        </div>
      </px-col>
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus" style="position: relative">
          <modelTitle :title="'tCO2e量预测实际对比'" />
          <chartswwt8 :chartvalue="datavalue?.factoryBar" style="width: 100%" :width="'100%'" :height="'270px'" />
        </div>
      </px-col>
      <px-col :span="8" class="water_col">
        <div class="waterdom borderRidus" style="position: relative">
          <modelTitle :title="'厂区tCO2e量预测'" />
          <chartswwt7 :chartvalue="datavalue?.levelBar" style="width: 100%" :width="'100%'" :height="'270px'" />
        </div>
      </px-col>
    </px-row>
    <px-row style="height: 364px; margin-top: 16px" :gutter="16">
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus" style="position: relative">
          <px-button
            v-show="firstDataflg"
            style="position: absolute; top: 20px; right: 100px"
            size="small"
            type="primary"
            plain
            @click="gobackpiedata"
            >返回</px-button
          >
          <modelTitle :title="'排放类别tCO2e量占比预测'" />
          <!-- <px-button type="primary" style="position: absolute; top: 16px; right: 32px" plain @click="handleExport23">导出</px-button> -->
          <div class="model_chart" style="margin-top: 16px">
            <chartswwt2 :chartvalue="firstPieList" style="width: 100%" :width="'100%'" :height="'270px'" @getPieData="setgetPieData" />
          </div>
        </div>
      </px-col>
      <px-col :span="12" class="water_col"
        ><div class="waterdom borderRidus" style="position: relative">
          <modelTitle :title="'设施活动tCO2e量预测'" />
          <!-- <px-button type="primary" style="position: absolute; top: 16px; right: 32px" plain @click="handleExport24">导出</px-button> -->
          <div class="model_chart" style="margin-top: 16px">
            <chartswwt5 :chartvalue="firstBarList" style="width: 100%" :width="'100%'" :height="'270px'" />
          </div></div
      ></px-col>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartswwt2 from "./components/chartswwt2.vue";
import chartswwt5 from "./components/chartswwt5.vue";
import chartswwt7 from "./components/chartswwt7.vue";
import chartswwt8 from "./components/chartswwt8.vue";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { AlgorithmFacilitygetFinalAggregatedData, AlgorithmFacilitygetFinalAggregatedDataLine } from "@/api/doubleCarbonManage/forecast";
import { accountingTemplatequery } from "@/api/doubleCarbonManage/accountingBoundary";
const data = reactive({
  queryParams: {
    particularYear: "",
    level: null,
    templateId: "",
    templateName: "ISO14064"
  },
  templateList: [],
  summary: {},
  consume: {},
  rank: {},
  trend: {},
  exportMonitor: {},
  firstPieList: [],
  firstBarList: [],
  firstData: {},
  firstDataflg: false,
  datavalue: {}
});
const liquidList = [
  { itemName: "全厂", itemValue: null },
  { itemName: "创新中心一期", itemValue: "创新中心一期" },
  { itemName: "创新中心二期", itemValue: "创新中心二期" }
];
const { datavalue, firstDataflg, firstData, firstPieList, firstBarList, exportMonitor, queryParams, templateList, summary, consume, rank, trend } =
  toRefs(data);
const handleQuery = () => {
  getList();
};
const gobackpiedata = () => {
  firstDataflg.value = false;
  firstPieList.value = firstData.value.category;
  firstBarList.value = firstData.value.categoryBar;
};
const setgetPieData = val => {
  console.log(val);
  if (val) {
    firstDataflg.value = true;
    firstPieList.value = firstData.value.childCategoryList.filter(item => item.category == val.name)[0].childCategory;
    firstBarList.value = firstData.value.childCategoryBarList.filter(item => item.category == val.name)[0].childCategory;
  }
};
const resetQuery = () => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  console.log();
  queryParams.value.particularYear = (end.getFullYear() + 1).toString();
  queryParams.value.level = null;
  queryParams.value.templateId = templateList.value[0]?.id;
  if (localStorage.getItem("facList")) {
    let faclist = JSON.parse(localStorage.getItem("facList"));
    if (faclist.length == 1) {
      facDisabled.value = true;
      queryParams.value.level = faclist[0].name;
      getList();
    } else if (faclist.length == 2) {
      facDisabled.value = false;
      queryParams.value.level = null;
      getList();
    }
  }
};
let facDisabled = ref(false);
onMounted(() => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  console.log();
  queryParams.value.particularYear = (end.getFullYear() + 1).toString();
  accountingTemplatequery({
    pageNum: 1,
    pageSize: 999
  }).then((response: any) => {
    templateList.value = response.data;
    queryParams.value.templateId = templateList.value[0]?.id;
    // getList();
    if (localStorage.getItem("facList")) {
      let faclist = JSON.parse(localStorage.getItem("facList"));
      if (faclist.length == 1) {
        facDisabled.value = true;
        queryParams.value.level = faclist[0].name;
        getList();
      } else if (faclist.length == 2) {
        facDisabled.value = false;
        queryParams.value.level = null;
        getList();
      }
    }
  });
});
const { proxy }: any = getCurrentInstance();
const handleExport = () => {
  exportMonitor.value.name = "配额剩余量";
  proxy.download("post", "/energy/quota/exportMonitor", exportMonitor.value);
};
const handleExport1 = () => {
  exportMonitor.value.name = "配额消耗";
  proxy.download("post", "/energy/quota/exportMonitor", exportMonitor.value);
};
// const handleExport2 = () => {
//   firstData.value.name = null;
//   firstData.value.type = "pie";
//   proxy.download("post", "/energy/accountingEmissionData/exportCategoryPieBar", firstData.value);
// };
const handleExport3 = () => {
  exportMonitor.value.name = "年度配额消耗趋势";
  proxy.download("post", "/energy/quota/exportMonitor", exportMonitor.value);
};
const getList = () => {
  AlgorithmFacilitygetFinalAggregatedData({
    startDate: `${queryParams.value.particularYear}-01-01 00:00:00`,
    endDate: `${queryParams.value.particularYear}-12-31 23:59:59`,
    level: queryParams.value.level,
    templateName: "ISO14064"
  }).then(res => {
    // console.log(res);
    firstData.value = res;
    if (res != null) {
      firstPieList.value = res.category;
      firstBarList.value = res.categoryBar;
      console.log(firstBarList.value);
    } else {
      firstPieList.value = [];
      firstBarList.value = [];
    }
  });
  AlgorithmFacilitygetFinalAggregatedDataLine({
    startDate: `${queryParams.value.particularYear}-01-01 00:00:00`,
    endDate: `${queryParams.value.particularYear}-12-31 23:59:59`,
    level: queryParams.value.level,
    templateName: "ISO14064"
  }).then(res => {
    console.log("预测--->", res);
    datavalue.value = res;
  });
};
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 30px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 calc(50% - 73px);
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

.accountingTop {
  position: relative;
  width: 100%;
  height: 89px;
  margin-bottom: 0;
}

.accountingTopicon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 48px;
  height: 48px;
}

.accountingTop1 {
  position: absolute;
  top: 30px;
  left: 70px;
  font-size: 18px;
  font-weight: 600;
}

.accountingTop2 {
  position: absolute;
  top: 31px;
  left: 230px;
  font-size: 16px;

  span {
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
  }
}

.accountingTop3 {
  position: absolute;
  top: 30px;
  left: 340px;
  font-size: 18px;
  font-weight: 600;
}

.accountingTop4 {
  position: absolute;
  top: 30px;
  left: 430px;
  font-size: 18px;
  font-weight: 600;
}

.accountingcenter {
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
}

.accountingcenter1 {
  position: absolute;
  top: 0;
  left: 10px;
  width: 200px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountingcenter2 {
  position: absolute;
  top: -1px;
  left: 230px;
  font-size: 16px;

  span {
    font-size: 18px;
    color: #3b82f6;
  }
}

.accountingcenter3 {
  position: absolute;
  top: -1px;
  left: 340px;
  font-size: 16px;
}

.accountingcenter4 {
  position: absolute;
  top: 40px;
  left: 250px;
  font-size: 18px;
}
</style>
